<template>
    <view class="bg-[#f8f8f8] min-h-screen">
        <view class="h-[10rpx]"></view>
        <view class="mx-[30rpx]">
            <view class="bg-[#FD755D] opacity-80 text-white rounded-t-xl font-bold py-[20rpx]">
                <view class="text-[42rpx] ml-[38rpx]">总学分：<text>999分</text></view>
                <view class="flex mt-[34rpx]">
                    <view class="w-1/3 flex flex-col items-center justify-center border-r border-[#fff]">
                        <view class="text-[38rpx]">666</view>
                        <view class="mt-[10rpx] text-[34rpx] font-medium">学校课堂</view>
                    </view>
                    <view class="w-1/3 flex flex-col items-center justify-center border-r border-[#fff]">
                        <view class="text-[38rpx]">222</view>
                        <view class="mt-[10rpx] text-[34rpx] font-medium">社区课堂</view>
                    </view>
                    <view class="w-1/3 flex flex-col items-center justify-center ">
                        <view class="text-[38rpx]">111</view>
                        <view class="mt-[10rpx] text-[34rpx] font-medium">校外课堂</view>
                    </view>
                </view>
            </view>
            <view class="bg-white ming-h-[60vh] px-[30rpx] pb-[50rpx]">
                <view class="py-[20rpx] text-[34rpx] flex justify-between">
                    <view>
                        <text class="text-[#FD755D] mr-[35rpx]">全部</text>
                        <text class="mr-[35rpx]">收入</text>
                        <text class="mr-[35rpx]">支出</text>
                    </view>
                    <view @click="show = true">学分类型></view>
                </view>
                <view class="py-[20rpx] flex justify-between border-b border-[#9CA3AF]">
                    <view class="flex items-center"><text class="mr-1">2024-12</text> <u-icon
                            name="arrow-down"></u-icon></view>
                    <view>
                        <text class="mr-2">+889</text>
                        <text>-110</text>
                    </view>
                </view>
                <view v-for="(item, index) in 3" :key="index"
                    class="flex justify-between py-[20rpx] items-center border-b border-[#EFEFEF]">
                    <view>
                        <view class="text-[#3D3D3D] font-medium text-[34rpx]">上课打卡</view>
                        <view class="text-[#979797] mt-1 text-[26rpx]">12-12 12:34</view>
                    </view>
                    <view class="text-[#FD755D]">+10</view>
                </view>
            </view>

        </view>
    </view>
    <u-popup :show="show" round="19" @close="show = false">
        <view class="px-[30rpx] pt-[20rpx]">
            <view class="text-center py-[20rpx] text-[34rpx] font-bold">学分类型</view>
            <view class="flex  flex-wrap ">
                <view v-for="(item, index) in data" :key="index"
                  :class="index == 0?'bg-[#ffe3df]  text-[#FD755D] border-[#FD755D]':'bg-[#EFEFEF] text-[#3D3D3D]'"   class="mr-[20rpx] mt-[42rpx] w-[210rpx] h-[76rpx]  flex items-center justify-center">
                    {{ item }}</view>

            </view>
            <view class="mt-[204rpx] flex items-center justify-center">
                <view class=" mr-[80rpx] text-[#FD755D] py-[20rpx] px-[50rpx] bg-[#ffd6cf] rounded  text-[32rpx]">取消</view>
                <view class=" text-white py-[20rpx] px-[50rpx] bg-[#FD755D] rounded  text-[32rpx]">确定</view>
            </view>
            
        </view>
    </u-popup>
</template>
<script setup>
import { ref } from 'vue'
const show = ref(false)
const data = ref(["全部", "上课打卡", "上课评价", "每日一题", "空中课堂", "分享体验", "提交表单", "手动加分", "教学实践", "系统取分", "核销事件"])
</script>